<template>
	<view class="notes-container">
		<!-- 顶部搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<input 
					type="text" 
					v-model="searchKey" 
					placeholder="搜索笔记内容" 
					@confirm="searchNotes"
				/>
			</view>
		</view>
		
		<!-- 笔记分类标签 -->
		<scroll-view scroll-x class="tag-scroll" :show-scrollbar="false">
			<view class="tag-list">
				<view 
					class="tag-item" 
					v-for="(tag, index) in tags" 
					:key="index"
					:class="{ active: currentTag === tag }"
					@tap="switchTag(tag)"
				>{{ tag }}</view>
			</view>
		</scroll-view>
		
		<!-- 笔记列表 -->
		<scroll-view 
			scroll-y 
			class="notes-list"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
		>
			<view class="note-item" v-for="(note, index) in notesList" :key="index" @tap="viewNoteDetail(note)">
				<view class="book-info">
					<image class="book-cover" :src="note.bookCover" mode="aspectFill"></image>
					<view class="book-meta">
						<text class="book-name">{{ note.bookName }}</text>
						<text class="chapter-name">{{ note.chapterName }}</text>
					</view>
					<view class="note-time">{{ note.createTime }}</view>
				</view>
				
				<view class="note-content">
					<text class="content-text">{{ note.content }}</text>
					<view class="original-text" v-if="note.originalText">
						<text class="quote-mark">『</text>
						<text class="text">{{ note.originalText }}</text>
						<text class="quote-mark">』</text>
					</view>
				</view>
				
				<view class="note-footer">
					<view class="tags" v-if="note.tags && note.tags.length">
						<text class="tag" v-for="(tag, tagIndex) in note.tags" :key="tagIndex">#{{ tag }}</text>
					</view>
					<view class="operations">
						<view class="op-item" @tap.stop="shareNote(note)">
							<text class="iconfont icon-share"></text>
							<text>分享</text>
						</view>
						<view class="op-item" @tap.stop="editNote(note)">
							<text class="iconfont icon-edit"></text>
							<text>编辑</text>
						</view>
						<view class="op-item" @tap.stop="deleteNote(note)">
							<text class="iconfont icon-delete"></text>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
		</scroll-view>
		
		<!-- 新建笔记按钮 -->
		<view class="add-note-btn" @tap="createNewNote">
			<text class="iconfont icon-add"></text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKey: '',
			tags: ['全部', '读书感悟', '金句摘抄', '知识要点', '个人随笔'],
			currentTag: '全部',
			isRefreshing: false,
			hasMore: true,
			page: 1,
			notesList: [
				{
					id: 1,
					bookName: '三体',
					bookCover: '/static/875f-kpamyih7048893.jpg',
					chapterName: '第三章 射手和农场主',
					createTime: '2024-03-20 14:30',
					content: '在这一章中，作者通过射手和农场主的对话，深刻揭示了人性的复杂性。每个人都在自己的位置上，试图理解这个世界，但又都带着自己的偏见和局限。',
					originalText: '是啊，宇宙就是一座黑暗森林，每个文明都是带枪的猎人，像幽灵般潜行于林间，轻轻拨开挡路的树枝，竭力不让脚步发出一点儿声音，连呼吸都必须小心翼翼……',
					tags: ['读书感悟', '金句摘抄']
				},
				{
					id: 2,
					bookName: '活着',
					bookCover: '/static/01d7a06376f6a0000ed21000391d95.jpg',
					chapterName: '第八章 变故',
					createTime: '2024-03-19 20:15',
					content: '福贵的一生，就是在不断的失去中寻找活着的意义。生命的顽强和韧性，在苦难面前显得尤为动人。',
					tags: ['读书感悟']
				}
				// 更多笔记数据...
			]
		}
	},
	methods: {
		searchNotes() {
			// 搜索笔记
			console.log('搜索关键词：', this.searchKey)
		},
		switchTag(tag) {
			this.currentTag = tag
			this.page = 1
			this.hasMore = true
			this.notesList = [] // 清空列表
			this.loadNotesList() // 重新加载笔记列表
		},
		loadNotesList() {
			// 加载笔记列表
			console.log('加载笔记列表：', this.currentTag, this.page)
		},
		loadMore() {
			if (!this.hasMore) return
			this.page++
			this.loadNotesList()
		},
		onPulling() {
			// 下拉刷新触发时
		},
		async onRefresh() {
			this.isRefreshing = true
			await this.loadNotesList()
			this.isRefreshing = false
		},
		viewNoteDetail(note) {
			uni.navigateTo({
				url: `/pages/note-detail/note-detail?id=${note.id}`
			})
		},
		createNewNote() {
			uni.navigateTo({
				url: '/pages/note-edit/note-edit'
			})
		},
		shareNote(note) {
			// 分享笔记
			console.log('分享笔记：', note)
		},
		editNote(note) {
			uni.navigateTo({
				url: `/pages/note-edit/note-edit?id=${note.id}`
			})
		},
		deleteNote(note) {
			uni.showModal({
				title: '提示',
				content: '确定删除这条笔记吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('删除笔记：', note)
						// 执行删除操作
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.notes-container {
	min-height: 100vh;
	background: #f5f5f5;
	
	.search-bar {
		padding: 20rpx;
		background: #fff;
		
		.search-box {
			height: 72rpx;
			background: #f5f5f5;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			
			.icon-search {
				font-size: 32rpx;
				color: #999;
				margin-right: 20rpx;
			}
			
			input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
			}
		}
	}
	
	.tag-scroll {
		background: #fff;
		white-space: nowrap;
		padding: 0 20rpx;
		
		.tag-list {
			display: inline-flex;
			padding: 20rpx 0;
			
			.tag-item {
				padding: 10rpx 30rpx;
				font-size: 28rpx;
				color: #666;
				margin-right: 20rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				
				&.active {
					color: #fff;
					background: #3cc51f;
				}
			}
		}
	}
	
	.notes-list {
		height: calc(100vh - 200rpx);
		padding: 20rpx;
		
		.note-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.book-info {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.book-cover {
					width: 80rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
				
				.book-meta {
					flex: 1;
					margin-left: 20rpx;
					
					.book-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
					}
					
					.chapter-name {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
						display: block;
					}
				}
				
				.note-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.note-content {
				margin-bottom: 20rpx;
				
				.content-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
				}
				
				.original-text {
					margin-top: 20rpx;
					padding: 20rpx;
					background: #f9f9f9;
					border-radius: 10rpx;
					
					.quote-mark {
						color: #999;
					}
					
					.text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
					}
				}
			}
			
			.note-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.tags {
					flex: 1;
					overflow: hidden;
					
					.tag {
						font-size: 24rpx;
						color: #3cc51f;
						margin-right: 20rpx;
					}
				}
				
				.operations {
					display: flex;
					
					.op-item {
						display: flex;
						align-items: center;
						margin-left: 30rpx;
						
						.iconfont {
							font-size: 32rpx;
							color: #999;
							margin-right: 10rpx;
						}
						
						text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
		
		.loading-more, .no-more {
			text-align: center;
			padding: 30rpx 0;
			
			text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.add-note-btn {
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background: #3cc51f;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(60, 197, 31, 0.3);
		
		.icon-add {
			font-size: 48rpx;
			color: #fff;
		}
	}
}
</style> 